<template>
    <div>
        <div v-if="type == 'left'">
            <el-form-item :label="`HDMI ${$t('enable')}`">
                <el-switch v-model="data.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
            </el-form-item>

            <el-form-item :label="$t('Interface')">
                <el-select v-model="data.type" :placeholder="$t('select_placeholder')" style="width: 100%;">
                    <el-option label="HDMI" value="hdmi"></el-option>
                    <el-option label="DVI" value="dvi"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item :label="$t('resolution')">
                <el-select v-model="data.output" :placeholder="$t('select_placeholder')" style="width: 100%;">
                    <el-option value="3840x2160_60" v-if="maxOutput == '4K60'">4K60</el-option>
                    <el-option value="3840x2160_50" v-if="maxOutput == '4K60'">4K50</el-option>
                    <el-option value="3840x2160_30" v-if="maxOutput == '4K60' || maxOutput == '4K30'">4K30</el-option>
                    <el-option value="1080P60">1080P60</el-option>
                    <el-option value="1080I60">1080I60</el-option>
                    <el-option value="1080P50">1080P50</el-option>
                    <el-option value="1080I50">1080I50</el-option>
                    <el-option value="1080P30">1080P30</el-option>
                    <el-option value="1080P25">1080P25</el-option>
                    <el-option value="1080P24">1080P24</el-option>
                    <el-option value="720P60">720P60</el-option>
                    <el-option value="720P50">720P50</el-option>
                    <el-option value="1920x2160_30">1920x2160_30</el-option>
                    <el-option value="2560x1600_60">2560x1600_60</el-option>
                    <el-option value="2560x1440_60">2560x1440_60</el-option>
                    <el-option value="2560x1440_30">2560x1440_30</el-option>
                    <el-option value="1920x1200_60">1920x1200_60</el-option>
                    <el-option value="1680x1050_60">1680x1050_60</el-option>
                    <el-option value="1600x1200_60">1600x1200_60</el-option>
                    <el-option value="1440x900_60">1440x900_60</el-option>
                    <el-option value="1366x768_60">1366x768_60</el-option>
                    <el-option value="1280x1024_60">1280x1024_60</el-option>
                    <el-option value="1280x800_60">1280x800_60</el-option>
                    <el-option value="1024x768_60">1024x768_60</el-option>
                    <el-option value="800x600_60">800x600_60</el-option>
                    <el-option value="576P50">576P50</el-option>
                    <el-option value="480P60">480P60</el-option>
                </el-select>
            </el-form-item>
        </div>

        <div v-if="type == 'right'">
            <el-form-item label="" style="height: 32px;">
            </el-form-item>

            <el-form-item :label="`${hardware.capability.extraVo} ${$t('enable')}`">
                <el-switch v-model="data.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
            </el-form-item>

            <el-form-item :label="$t('resolution')">
                <el-select v-model="data.output" :placeholder="$t('select_placeholder')" style="width: 100%;">
                    <el-option value="1080P60">1080P60</el-option>
                    <el-option value="1080I60">1080I60</el-option>
                    <el-option value="1080P50">1080P50</el-option>
                    <el-option value="1080I50">1080I50</el-option>
                    <el-option value="1080P30">1080P30</el-option>
                    <el-option value="720P60">720P60</el-option>
                    <el-option value="720P50">720P50</el-option>
                </el-select>
            </el-form-item>
        </div>

        <el-form-item :label="$t('rotate')">
            <el-select v-model="data.rotate" :placeholder="$t('select_placeholder')" style="width: 100%;">
                <el-option value="0">0</el-option>
                <el-option value="90">90</el-option>
                <el-option value="180">180</el-option>
                <el-option value="270">270</el-option>
            </el-select>
        </el-form-item>

        <el-form-item :label="$t('video source')">
            <el-select v-model="data.src" :placeholder="$t('select_placeholder')" style="width: 100%;">
                <el-option v-for="item in configOptions" :key="item.value" :label="item.label"
                    :value="item.value+''"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item :label="$t('low latency')">
            <el-switch v-model="data.lowLatency" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
        </el-form-item>

        <el-form-item :label="$t('CSC')">
            <el-select v-model="data.csc.matrix" :placeholder="$t('select_placeholder')" style="width: 100%;">
                <el-option value="identity" :label="$t('Identity')"></el-option>
                <el-option value="601_709" label="601 to 709"></el-option>
                <el-option value="709_601" label="709 to 601"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item :label="$t('luma')">
            <el-slider v-model.number="data.csc.luma" show-input/>
        </el-form-item>

        <el-form-item :label="$t('contrast')">
            <el-slider v-model.number="data.csc.contrast" show-input/>
        </el-form-item>

        <el-form-item :label="$t('saturation')">
            <el-slider v-model.number="data.csc.saturation" show-input/>
        </el-form-item>

        <el-form-item :label="$t('hue')">
            <el-slider v-model.number="data.csc.hue" show-input/>
        </el-form-item>
    </div>
</template>

<script setup >
const props = defineProps(['type', 'data', 'configOptions', 'hardware'])
let type = ref('')
let data = reactive({})
let maxOutput = ref('')
let configOptions = ref([])
watchEffect(() => {
    type.value = props.type
    maxOutput = props.hardware.capability.maxOutput
    configOptions.value = props.configOptions

    data = props.data
    data.csc.luma = Number(data.csc.luma)
    data.csc.contrast = Number(data.csc.contrast)
    data.csc.saturation = Number(data.csc.saturation)
    data.csc.hue = Number(data.csc.hue)
})

</script>

<style lang='scss' scoped></style>